
<template>
              <div style="width: 100%;height: 100%;">
           <div
     id="jdsbslpm"
     class="w-100 "
     style="height: 90%; position: relative"
   ></div>  
       </div>
</template>
    
<script setup lang='ts'>
import * as echarts from "echarts";

    //模拟数据
var data = [{
   "名称": "建桥街道",
   "面积数值_BA_2": 55
}, {
   "名称": "晴川街道",
   "面积数值_BA_2": 32
}, {
   "名称": "鹦鹉街道",
   "面积数值_BA_2": 29
}, ]
var orgOptions = {
   "linkExtendList": [],
   "sortDataList": [{
      "col": "面积数值",
      "Merge": false,
      "series": {
         "percentile": false,
         "tooltip": {
            "show": true
         },
         "label": {
            "normal": {
               "dataLabelWereset": false,
               "show": false,
               "textStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
               }
            }
         },
         "decimaldigits": 0
      },
      "merge": false,
      "sort": "desc",
      "sortable": false
   }, {
      "col": "名称",
      "Merge": false,
      "colType": "varchar2",
      "display": true,
      "merge": false,
      "values": [],
      "id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
      "sortable": false,
      "type": "eq"
   }],
   "chart_type": "metaPortlet",
   "keys": [{
      "col": "名称",
      "Merge": false,
      "colType": "varchar2",
      "display": true,
      "merge": false,
      "values": [],
      "alias": "名称",
      "id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
      "sortable": false,
      "type": "eq"
   }],
   "seriesCommon": {
      "label": {
         "normal": {
            "rotate": 0,
            "distance": 5,
            "offset": [0, 0],
            "dataLabelWereset": false,
            "show": true
         }
      }
   },
   "values": [{
      "cols": [{
         "col": "面积数值_BA_2",
         "colDataType": "NUMBER",
         "expCalFormulaReplace": "",
         "series": {
            "Insideoption": {
               "valuetype": "5",
               "valueStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
               },
               "text": "",
               "textStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
               },
               "type": "1"
            },
            "animationDelayTime": "",
            "percentile": false,
            "lineStyle": {
               "type": "solid"
            },
            "tooltip": {
               "show": true
            },
            "symbolShow": true,
            "label": {
               "normal": {
                  "show": false,
                  "textStyle": {
                     "fontFamily": "sans-serif",
                     "color": "#000000",
                     "fontSize": "12",
                     "fontStyle": "normal",
                     "fontWeight": "normal"
                  }
               }
            },
            "symbolNotShow": false,
            "decimaldigits": 0
         },
         "seriesType": "bar",
         "display": true,
         "expCalFormula": "",
         "width": 0,
         "alias": "面积数值",
         "sortable": false,
         "aggregate_type": "sum",
         "decimaldigits": 0
      }],
      
   }],
   "option": {
      "BAMetaAttributes": {
         "configshowslider": "1",
         "xuhaofontsize": 16,
         "fontsizeright": 16,
         "configautoslider": "1",
         "configpagesize": 4,
         "leftpadding": 30,
         "attrname": "个",
         "rightpadding": 20,
         "fontsizeleft": 16,
         "xuhaorightpadding": 50
      }
   }
   
}



var config_pagesize = orgOptions.option.BAMetaAttributes.configpagesize - 1;;
var config_showslider = orgOptions.option.BAMetaAttributes.configshowslider;
var config_autoslider = orgOptions.option.BAMetaAttributes.configautoslider;
var fontsizeleft = orgOptions.option.BAMetaAttributes.fontsizeleft;
var fontsizeright = orgOptions.option.BAMetaAttributes.fontsizeright;
var attrname = orgOptions.option.BAMetaAttributes.attrname ? orgOptions.option.BAMetaAttributes.attrname : '';
var leftpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes
   .leftpadding : 10;
var xuhaofontsize = orgOptions.option.BAMetaAttributes.xuhaofontsize != null ? orgOptions.option.BAMetaAttributes
   .xuhaofontsize : 28;
var rightpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes
   .rightpadding : 60;
var xuhaorightpadding = orgOptions.option.BAMetaAttributes.xuhaorightpadding != null ? orgOptions.option
   .BAMetaAttributes.xuhaorightpadding : 0;


var h1keyName = orgOptions.keys[0].col;
var z1keyName = orgOptions.values[0].cols[0].col;

var dataSource:any = [];
var dataSourcebg = [];
var maxNum = 0;
for (let index = 0; index < data.length; index++) {
   const element:any = data[index];
   let tempitem = {
      value: element[z1keyName],
      name: element[h1keyName],
      xuhao: index + 1,
   }
   dataSource.push(tempitem);
   dataSourcebg.push(100);
   if (element[z1keyName] > maxNum) {
      maxNum = element[z1keyName];
   }
}
var maxArr = data.map((item) => maxNum);
console.log('dataSource', dataSource)

const img1 =
   '';
const img2 =
   '';
const img3 =
   '';
const img4 =
   '';

let option = {
   grid: [{
      left: leftpadding,
      top: 13,
      right: rightpadding,
      bottom: 2,
      containLabel: true,
   },],
   xAxis: [{
      gridIndex: 0,
      type: 'value',
      axisLabel: {
         show: false
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
   },
   {
      gridIndex: 0,
      type: 'value',
      max: 100,
      axisLabel: {
         show: false
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
   },
   ],
   yAxis: [{
      gridIndex: 0,
      type: 'category',
      inverse: true,
      position: 'left',
      data: dataSource.map((item:any) => item.name),
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: false
      },
      axisLabel: {
         width: xuhaofontsize * 2.5,
         padding: [0, 0, 20, -95 + xuhaorightpadding],
         align: 'left',
         formatter: (name:any, index:any) => {
            let tempValue;
            for (var i = 0; i < dataSource.length; i++) {
               if (dataSource[i].name === name) {
                  tempValue = dataSource[i].xuhao;
               }
            }

            const id = tempValue;
            if (id < 4) {
               return `{icon${id}|${id}}`;
            } else {
               return `{count|${id}}`;
            }
         },
         rich: {
            icon1: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               align: 'center',
               padding: [0, 0, 2, 0],
               backgroundColor: {
                  image: img1,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            icon2: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img2,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            icon3: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img3,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            },
            count: {
               width: xuhaofontsize * 1.5,
               height: xuhaofontsize * 1.5,
               padding: [0, 0, 2, 0],
               align: 'center',
               backgroundColor: {
                  image: img4,
               },
               color: '#ffffff',
               fontSize: xuhaofontsize,
            }
         },
      },
   },],

   series: [{
      name: '背景',
      type: 'bar',
      barWidth: 6,
      barGap: '-100%',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: maxArr,
      itemStyle: {
         normal: {
            color: '#02BAF433',
            barBorderRadius: [30, 30, 30, 30],
         },
      },
      label: {
         show: true,
         offset: [40, 0],
         color: '#00C0FD',
         fontSize: fontsizeright,
         fontWeight: 500,
         position: 'right',
         align: 'right',
         formatter: function (params:any) {
            let tempValue;
            for (var i = 0; i < dataSource.length; i++) {
               if (dataSource[i].name === params.name) {
                  tempValue = dataSource[i].value;
               }
            }
            return tempValue + attrname;
         }
      }
   },
   {
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      barWidth: 6,
      data: dataSource,
      silent: true,
      label: {
         show: true,
         offset: [10, -16],
         color: '#fff',
         fontSize: fontsizeright,
         fontWeight: 500,
         position: 'left',
         align: 'left',
         formatter: function (params:any) {
            return params.data.name;
         }
      },
      itemStyle: {
         emphasis: {
            barBorderRadius: [0, 20, 20, 0],
         },
         normal: {
            barBorderRadius: [0, 20, 20, 0],
            color: function (param:any) {
               return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [{
                     offset: 0,
                     color: '#00C0FD00', // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#00C0FD', // 100% 处的颜色
                  },
                  ],
                  false
               )
            },
         },
      },
   },
   {
      type: 'pictorialBar',
      data: dataSource.map((item:any) => item.value),
      xAxisIndex: 0,
      yAxisIndex: 0,
      symbol: 'circle',
      symbolRotate: null,
      symbolSize: [7, 7],
      z: 100,
      symbolPosition: 'end',
      symbolOffset: [0, 0],
      itemStyle: {
         color: function (param:any) {
            return '#00C0FD'
         },
         shadowColor: 'rgba(115, 243, 255, 1)',
         shadowBlur: 6,
      },
   },

   ],
};
onMounted(() => {
 let myChart = echarts.init(
   document.getElementById("jdsbslpm") as HTMLElement
 );

 myChart.setOption(option);
});
</script>
    
<style>
    
</style>